<template>
  <div class="page">
    <!-- banner 开始 -->
    <div class="banner">
      <img src="@/assets/images/october/banner.png" alt="">
      <img src="@/assets/images/october/banner_01.png" alt="">
      <img src="@/assets/images/october/banner_02.png" alt="">
    </div>
    <!-- banner 开始 -->

    <div class="information_box">
      <div class="cell">
        <div class="input_box">
          <input type="text" class="a_input" v-model="form.name" placeholder="请输入您的姓名" />
        </div>
        <div class="sex_box">
          <a href="javascript:void(0)" :class="form.gender == 1 ?'active':''" @click="chooseSex(1)">男</a>
          <a href="javascript:void(0)" :class="form.gender == 2 ?'active':''" @click="chooseSex(2)">女</a>
        </div>
      </div>
      <div class="cell">
        <div class="input_box">
          <input type="text" class="a_input" v-model="form.mobile" placeholder="请输入您的手机号码" />
        </div>
      </div>
      <div class="cell">
        <div class="input_box">
          <input type="text" class="a_input" v-model="form.code" placeholder="请输入验证码" />
        </div>
        <div class="code_box">
          <button class="btn" @click="sendCode" :disabled="time > 0">{{ time > 0 ? time + "重新获取" : "点击获取" }}</button>
        </div>
      </div>

      <!-- 借款金额 开始 -->
      <div class="cell">
        <div class="input_box">
          <select class="a_select" v-model="form.age" placeholder="请选择年龄">
            <option value="">请选择年龄</option>
            <option v-for="(item,index) in ageList" :key="index" :value="item">{{item}}</option>
          </select>
        </div>
      </div>
      <!-- 借款金额 end -->

      <div class="cell">
        <div class="input_box" @click="showCityeBox">
          <input type="text" class="a_input" readonly placeholder="您的工作所在地" />
        </div>
      </div>

      <!-- 城市 开始 -->
      <div class="city_list" v-show="showCity">
        <div class="cell" v-for="(item, index) in cityList" :key="index">
          <div class="cell_in" :class="address == item ? 'active' : ''" @click="chooseAddress(item)">
            {{ item }}
          </div>
        </div>
      </div>
      <!-- 城市 end -->

      <!-- 借款金额 开始 -->
      <div class="cell">
        <div class="input_box">
          <!-- <input type="text" class="a_input" readonly placeholder="您的借款金额" /> -->
          <select class="a_select" v-model="amount" placeholder="请选择借款金额">
            <option value="">请选择借款金额</option>
            <option value="15-20万">15-20万</option>
            <option value="10-15万">10-15万</option>
            <option value="5-10万">5-10万</option>
          </select>
        </div>
      </div>
      <!-- 借款金额 end -->

      <!-- 完善信息快速审核（可多选） 开始 -->
      <div v-show="amount">
        <div class="title">请完善资产信息，方便提额通过（可多选）<span class="cred">*</span></div>
        <div class="city_list info_list">
          <div class="cell" v-for="(item, index) in infoList" :key="index">
            <div class="cell_in" :class="form[item.id]? 'active' : ''" @click="chooseInfo(item.id)">
              {{currentCity}}{{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <!-- 完善信息快速审核（可多选） end -->

      <!-- 立即申请 开始 -->
      <div class="btn_group">
        <van-button size="large" class="apply_btn" type="info" @click="apply" :loading="loading">立即申请</van-button>
      </div>
      <!-- 立即申请 end -->

      <!-- 协议 开始 -->
      <div class="xiyi_box">
        <van-checkbox v-model="checked" checked-color="#0053f3" icon-size="16">接受<span @click.stop="lookContract">《用户协议/隐私协议》</span></van-checkbox>
      </div>
      <!-- 协议 end -->

    </div>

    <!-- 底部 开始 -->
    <div class="footer_box">
      <!-- <img src="@/images/footer.jpg" class="footer_img" alt=""> -->
      <div class="footer_tips">*我们郑重承诺：以上信息严格保密</div>
      <img src="@/assets/images/october/footer_01.png" class="footer_img" alt="">
      <img src="@/assets/images/october/footer_02.png" class="footer_img" alt="">
    </div>
    <div class="footer">
      <p>摩尔龙集团</p>
      <p>Copyright 2009-2021 Edai Corporation All Rights Reserved.</p>
      <p>四川易贷网金融信息服务有限公司 版权所有</p>
      <p>摩尔龙贷款代办服务</p>
      <p>温馨提示：</p>
      <p>贷款有风险，借款需谨慎</p>
      <p>请根据个人能力合理贷款，理性消费，避免逾期</p>
      <p>贷款额度、放款时间等以实际审批为准</p>
      <p>本产品综合年化利率最低3.6%-12%(单利)</p>
      <p>合作机构：平安银行 2020.09.07-长期</p>
      <p>新网银行：2022.01.14-2023.1.13</p>
      <p>长银消费：2022.01.01-2022.12.31</p>
      <p>温馨提示：公积金相关资料仅作为贷款服务验资证明,放款路径与公积金账户无关</p>
      <p>备案号：蜀ICP备16029964号</p>
    </div>
    <!-- 底部 end -->

    <!-- 弹框 开始 -->
    <van-popup v-model="showPopup" position="bottom">
      <van-picker show-toolbar :columns="ageList" @confirm="onConfirm" @cancel="closeDialog" />
    </van-popup>
    <!-- 弹框 end -->

    <!-- 确认城市弹框 开始 -->
    <van-dialog v-model="showDialog" title="提示" show-cancel-button @confirm="submit()" :before-close="beforeClose">
      <div class="van_dialog">
        <h2 class="h2">本产品不接受跨城市放款申请，请问您的常驻城市是？</h2>
        <div class="city_list_box">
          <van-button class="van_button" size="small" v-for="(item, index) in confirmList" :key="index" :type="confirmCity == item ? 'info' : 'default'" @click="chooseCity(item)">{{ item }}</van-button>
        </div>
      </div>
    </van-dialog>
    <!-- 确认城市弹框 end -->

    <!-- 协议确认弹框 开始 -->
    <van-dialog v-model="xieyiDialog" title="提示" show-cancel-button @confirm="confirmEvent" @cancel="cancelEvent">
      <div class="agreement_box">
        <agreement-contract></agreement-contract>
      </div>
    </van-dialog>
    <!-- 协议确认弹框 开始 -->

  </div>
</template>

<script>
import {
  MARKETINGADD,
  GETIPINFO,
  GETCODE,
  GETMOBILEADDRESS,
  SENDMARKETINGREPORTING,
  GETALLCITYLIST,
  SAVEAPPLYINFO,
  GETALLTHREECITYLIST,
} from "@/http/october";
import {
  RadioGroup,
  Radio,
  Checkbox,
  Grid,
  GridItem,
  Toast,
  Dialog,
  Button,
  Popup,
  Picker,
  Icon,
} from "vant";
import {
  checkPhone,
  showToast,
  showLoading,
  hideLoading,
  getUrlParams,
} from "@/common/util";
import AgreementContract from "./agreement";
export default {
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Checkbox.name]: Checkbox,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Icon.name]: Icon,
    [Dialog.Component.name]: Dialog.Component,
    AgreementContract,
  },
  data() {
    return {
      list: [12, 24, 36, 60, 96],
      active: 12,
      radio: 1,
      cityList: [],
      address: "",
      infoList: [
        { name: "有打卡工资", id: "getwayIncome", value: 1 },
        { name: "有公积金", id: "publicFund", value: 1 },
        { name: "有缴企业税", id: "company", value: 1 },
        { name: "有商品房", id: "house", value: 1 },
        { name: "有私家车", id: "car", value: 1 },
        { name: "有人寿保险", id: "insurance", value: 1 },
      ],
      infoActive: "",
      checkList: {},
      checked: false,
      amount: "",
      monthPay: 0,
      total: 0,
      form: {
        gender: 1,
        age: "",
        // company: 2,
        // getwayIncome: 2,
        // house: 2,
        // insurance: 2,
        // publicFund: 2,
        // car: 2,
      },
      ageList: [],
      showPopup: false,
      time: 0,
      showMore: false,
      ipCity: "",
      confirmList: [],
      showDialog: false,
      confirmCity: "",
      loading: false,
      applyInfo: {},
      adId: "",
      currentCity: "",
      xieyiDialog: false,
      showCity: false,
    };
  },
  mounted() {
    //this.getCity();
    this.send();
    this.getIp();
    this.calculate();

    let arr = [];
    for (let i = 25; i <= 55; i++) {
      arr.push(i);
    }
    this.ageList = arr;
  },
  methods: {
    /** 选择借款期数 */
    onClick(e) {
      this.active = e;
      this.calculate();
    },

    /** 选择工作地 */
    chooseAddress(e) {
      this.address = e;
    },

    /** 选择信息 */
    chooseInfo(id) {
      let o = this.form;
      if (o[id]) {
        this.$set(this.form, id, "");
      } else {
        this.$set(this.form, id, 1);
      }
    },

    /** 选择以上皆无 */
    hasNothing() {
      let o = this.form;
      o.company = 2;
      o.getwayIncome = 2;
      o.house = 2;
      o.insurance = 2;
      o.publicFund = 2;
      o.car = 2;
      this.$set(this, "form", o);
      this.infoActive = 1;
    },

    /** 获取城市列表 */
    getCity() {
      let _this = this;
      let oParams = {};
      oParams.city = this.$route.query.city;
      oParams.mobile = this.form.mobile;
      GETALLTHREECITYLIST(oParams).then((res) => {
        console.log(res);
        let obj = res.data || [];

        _this.cityList = obj;
        //_this.cityList = [{ name: obj }];
        // _this.currentCity = obj.slice(0, obj.length - 1);
      });
    },

    /** 进入首页 埋点 */
    send() {
      let _this = this;
      let o = getUrlParams();
      let oParams = {};
      let base64 = this.toBase64();
      oParams.accountId = o.accountId;
      oParams.channel = o.channel;
      oParams.urlBase64 = base64;
      oParams.clickId = o.gdt_vid;
      console.log(oParams);
      MARKETINGADD(oParams).then((res) => {
        if (res.code != 0) {
          Toast(res.message || res.msg || "出错了，请联系管理员");
          return false;
        }
        _this.adId = res.o;
      });
    },

    /** 获取base64 */
    toBase64() {
      let url = window.location.href;
      let n = encodeURI(url);
      var base64 = btoa(n);
      return base64;
    },

    /** 获取ip */
    getIp() {
      let _this = this;
      GETIPINFO().then((res) => {
        console.log(res);
        if (res.code != 0) {
          Toast(res.message || res.msg || "出错了，请联系管理员");
          return false;
        }
        let obj = res.o || {};
        _this.ipCity = obj.city;
      });
    },

    /** 计算 */
    calculate() {
      let o = Number(this.amount);
      let m = Number(this.active);
      console.log(o);
      if (!o) {
        this.monthPay = 0;
        this.total = 0;
        return false;
      }

      //每期应还
      let mPay = ((o * 6) / 100 + o) / m;

      //到期总还
      let n = (6 * (m / 12)) / 100;
      let total = o * (1 + n);
      this.monthPay = mPay.toFixed(2);
      this.total = Number(total).toFixed(2);
    },

    /** 监听贷款金额输入 */
    onInput(e) {
      this.calculate();
    },

    /** 获取短信验证码 */
    sendCode() {
      let that = this;
      let time = 60;
      let o = this.form.mobile;
      if (!o) {
        Toast("请输入手机号码");
        return false;
      }

      if (!checkPhone(o)) {
        Toast("手机号码格式不正确");
        return false;
      }

      let m = setInterval(function () {
        if (time == 0) {
          clearInterval(m);
          that.time = "";
          return false;
        }
        time--;
        that.time = time--;
      }, 1000);

      this.showMore = true;
      that.getCity();
      GETCODE({ mobile: o }).then((res) => {
        console.log(res);
        // if (res.code != 0) {
        Toast(res.message || res.msg || "出错了，请联系管理员");
        return false;
        // }
        //that.form.code = res.data;
      });
    },

    /** 选择年纪 */
    onConfirm(e) {
      console.log(e);
      this.form.age = e;
      this.closeDialog();
    },

    /** 打开弹框 */
    openDialog() {
      this.showPopup = true;
    },

    /** 关闭弹框 */
    closeDialog() {
      this.showPopup = false;
    },

    /** 立即申请 */
    apply() {
      let _this = this;
      let o = this.form;

      // if (Number(this.amount) < 30000) {
      //   Toast("金融机构不接受3万以下申请");
      //   return false;
      // }
      if (!o.name) {
        Toast("请输入姓名");
        return false;
      }

      if (!o.name) {
        Toast("请输入姓名");
        return false;
      }

      if (!o.mobile) {
        Toast("请输入手机号码");
        return false;
      }

      if (!checkPhone(o.mobile)) {
        Toast("手机号码格式不正确");
        return false;
      }

      if (!o.code) {
        Toast("请输入验证码");
        return false;
      }

      if (!o.age) {
        Toast("请选择年龄");
        return false;
      }

      if (!this.address) {
        Toast("请选择工作所在地");
        return false;
      }

      if (!this.amount) {
        Toast("请选择贷款金额");
        return false;
      }

      if (
        !o.getwayIncome &&
        !o.publicFund &&
        !o.company &&
        !o.house &&
        !o.car &&
        !o.insurance
      ) {
        Toast("请选择完善信息");
        return false;
      }

      if (!this.checked) {
        this.xieyiDialog = true;
        window.navigator.vibrate(200);
        return false;
      }

      let m = getUrlParams();
      let oParams = JSON.parse(JSON.stringify(o));
      oParams.channel = m.channel;
      oParams.loanAmount = this.amount;
      oParams.city = this.address;
      console.log(oParams);

      // 选中的城市都一致
      _this.loading = true;
      _this.applyInfo = oParams;
      //_this.submit(oParams);

      //return false;

      // 获取手机归属地
      this.getMobileAddress()
        .then((res) => {
          // if(res.code != 0){
          //   Toast(res.message || res.msg || '出错了，请联系管理员')
          //   return false;
          // }
          console.log(res);
          let nm = res.City || "";
          if (nm && nm[nm.length - 1] != "市") {
            nm = nm + "市";
          }
          let arr = _this.judageCity(nm);

          // 选中的城市都一致
          _this.loading = true;
          if (!arr || arr.length <= 0) {
            _this.submit(oParams);
          } else {
            _this.showDialog = true;
            _this.confirmList = arr;
            _this.applyInfo = oParams;
            _this.loading = false;
          }
        })
        .catch((res) => {
          let arr = _this.judageCity("");

          // 选中的城市都一致
          _this.loading = true;
          if (!arr || arr.length <= 0) {
            _this.submit(oParams);
          } else {
            _this.showDialog = true;
            _this.confirmList = arr;
            _this.applyInfo = oParams;
            _this.loading = false;
          }
        });
      return false;
    },

    /** 提交信息 */
    submit(options) {
      let _this = this;
      let oParams = this.applyInfo;
      if (options) {
        oParams = options;
      }
      console.log(oParams);
      // if (!options && !this.confirmCity) {
      //   Toast("请选择常驻城市");
      //   return false;
      // }

      // if (!options) {
      //   oParams.city = this.confirmCity;
      // }
      SAVEAPPLYINFO(oParams).then((res) => {
        _this.loading = false;
        if (res.code != 0) {
          Toast(res.message || res.msg || "出错了，请联系管理员");
          return false;
        }
        _this.toReport();
        _this.$router.push({ name: "result" });
      });
      return false;
    },

    /** 获取手机号码归属地 */
    getMobileAddress() {
      let _this = this;
      let oParams = {};
      oParams.mobile = _this.form.mobile;
      return new Promise((resolve, reject) => {
        GETMOBILEADDRESS(oParams)
          .then((res) => {
            resolve(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },

    /** 判断地址 */
    judageCity(city) {
      let _this = this;
      let list = this.cityList;
      let ic = this.ipCity; //ip所在城市
      let c = _this.address; //选中的城市
      let arr = [];

      if (!city) {
        let iop = ic == c;
        if (!iop) {
          arr.push(ic);
          arr.push(c);
        }
        return arr;
      }

      let isPass = ic.indexOf(city) >= 0 || city.indexOf(ic) >= 0;
      if (!isPass) {
        arr.push(ic);
        arr.push(city);
      }

      //let child = c.childList;
      let isTrue = c.indexOf(city) >= 0 || city.indexOf(c) >= 0;
      console.log(city + "--" + c + "--" + ic);
      // child.map((k) => {
      //   let _name = k.name;
      //   console.log(_name);
      //   isTrue = _name.indexOf(city) >= 0 || city.indexOf(_name) >= 0;
      //   console.log(isTrue);
      // });
      console.log(arr);
      if (!isTrue) {
        let idx = arr.findIndex((k) => k == city);
        arr.push(c);
        if (idx < 0) {
          arr.push(city);
        }
      }
      console.log(arr);
      return arr;
    },

    /** 选择城市 */
    chooseCity(item) {
      console.log(item);
      this.confirmCity = item;
      this.address = item;
      this.applyInfo.city = item;
    },

    /** 关闭弹框 */
    beforeClose(action, done) {
      if (action === "confirm") {
        //this.submit('',done);
        done(false);
      } else {
        done();
      }
    },

    /** 广告上报 */
    toReport() {
      let _this = this;
      let o = getUrlParams();
      let oParams = {};
      let base64 = this.toBase64();
      // oParams.accountId = o.accountId;
      // oParams.channel = o.channel;
      // oParams.urlBase64 = base64;
      // oParams.clickId = o.gdt_vid;
      // console.log(oParams);
      oParams.mId = this.adId;
      SENDMARKETINGREPORTING(oParams);
    },

    /** 查看合同 */
    lookContract() {
      this.xieyiDialog = true;
      //this.$router.push({name:'result'})
      //window.location.href = "http://gdt.daofen100.com/agree/show.html";
    },

    //
    confirmEvent() {
      this.checked = true;
      this.apply();
    },

    cancelEvent() {
      this.xieyiDialog = false;
    },

    // 选择性别
    chooseSex(id) {
      this.$set(this.form, "gender", id);
    },

    // 展开城市选择
    showCityeBox() {
      this.showCity = !this.showCity;
    },
  },
};
</script>

<style lang="less">
html,
body {
  background: #f0f0f0;
}
</style>
<style lang="less" scoped>
@import "@/assets/styles/october.less";
</style>
